<script setup lang="ts">
import { Ref, ref} from 'vue';
import { onLoad } from '@dcloudio/uni-app'

const flag: Ref<boolean> = ref(true);

const switchbar = () => {
  flag.value = !flag.value;
};

onLoad(() => {
  setTimeout(() => {
    flag.value = false;
  }, 1000);
})

// 页面跳转
const details = () => {
	uni.navigateTo({
		url: '/pagesB/notion/details/details',
	});
};

</script>
<template>
	<loader v-if="flag"></loader>
	<template v-else>
		<view class="container">
			<view class="header">
				<text style="font-weight: 600;">顺德职业技术学院首届“智能杯”网页设计与开发大赛</text>
				<view class="header_center">
					<view>类型：校内文件</view>
					<view>部门：智能制造学院</view>
					<view>发布人：刁建忠</view>
				</view>
				<view class="header_time">发布时间 2022-12-21 09:00</view>
			</view>
			<view class="main">
				<view style="font-weight: 600;">活动的目的和意义</view>
				<text style="font-size: 15rpx;">
					为丰富学生校园文化生活、点缀校园缤纷色彩，提高学生的数字化应用素质技能，
					激发学生积极性和创造性，发掘优秀网页设计与开发人才，提高
					同学们网页制作水平，特举办“智能杯”网页设计与开发大赛。软件技术专
					业群是广东省高水平专业群，作为本次大赛的筹办单位，将为本次比赛提供
					赛事策划和技术支持。
				</text>
				<view style="font-weight: 600;">参赛对象</view>
				<text style="font-size: 25rpx;">
					本赛项为个人赛，参赛对象为本校全体在校学生
				</text>
				<view style="font-weight: 600;">参赛作品技术要求</view>
				<text style="font-size: 25rpx;">
					1、制作软件不限制，制作出来的网页具有一定的艺术观赏性，布局合理：
					2、使用Html5,Javascript和CSS3等主流技术设计，要求主题明确，构思
					新颖；
					3、兼容性强，在各种主流浏览器、操作系统，各种显示分辨率下均能正
					常显示和运行：
					4、页面深度建议3层左右，作品的总页面数以5到8个页面为适宜，全
					部文件的总容量尽量不超过20M(尽量少用音频视频文件)；
					5、作品中所有文件均要以小写英文字母或阿拉伯数字命名，包括（各文
					件夹、网页文件、图片文件等等)文件名及其后缀名；
					6、作品以压缩包形式上传，作品首页文件名为index.html,压缩包的目
					录基本结构如下图样式所示。
				</text>
			</view>
		</view>
	</template>
</template>
    
<style scoped lang="scss">
.container {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #f6f6f6;
	padding: 15rpx;

	.header {
		position: relative;
		height: 15vh;
		background-color: $bgcolor;
		border-radius: 15rpx;
		padding: 15rpx;
		background-color: #fff;

		&_center {
			margin-top: 2vh;
			font-size: 20rpx;
			color: #616161;
			@include flex(space-between);
		}

		&_time {
			position: absolute;
			bottom: 20rpx;
			right: 15rpx;
			color: #616161;
			font-size: 20rpx;
		}
	}

	.main {
		margin-top: 20rpx;
		height: 75vh;
		padding: 15rpx;
		border-radius: 15rpx;
		background-color: #fff;

		view {
			margin: 15rpx 0;
		}
	}
}
</style>